<template>
	<div class="banner">
		<div class="top">
			<div class="img">
				<img src="http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_600x330_ddcee9e0.jpg" alt="" @click="goimg">
				<div class="span" @click="gohome">
					<span class="iconfont">&#xe625;</span>
				</div>
				<div class="topshow"  @click="gohome" :style="Opacity">
					<i class="iconfont">&#xe625;</i>
					<h1>华清宫</h1>
				</div>
				<div class="imgnum">
					<i class="iconfont">&#xe627;</i>43
				</div>
				<div class="top_bottom">
					<h3>华清宫(AAAAA景区)</h3>
					<div class="right">
						<h4>视频</h4>
						<i class="iconfont">&#xe62e;</i>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="info">
				<div class="left">
					<div class="nice">
						<h2>4.9</h2>分
						<span>很棒</span>
					</div>
					<div>
						<span>37741条评论</span>
						<span>12条攻略</span>
					</div>
						<i class="iconfont">&#xe62e;</i>
				</div>
				<div class="right">
					<h3>景点简介</h3>
					<p>开放时间、贴士</p>
						<i class="iconfont">&#xe62e;</i>
				</div>
			</div>
			<div class="bottom">
				<i class="iconfont">&#xe65e;</i>
				<p>陕西省西安市临潼区华清路038号</p>
				<i class="iconfont">&#xe62e;</i>
			</div>
		</div>
		<div class="gowhere">
			<h2><i class="iconfont">&#xe652;</i>去哪儿推荐</h2>
			<ul>
				<li>
					<div class="left">
						<h3>华清宫成人门票 景区官方直营</h3>
						<div class="img">
							<img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">
						</div>
						<span>可订明日</span>
						<p><i>随时退</i></p>
					</div>
					<div class="right">
						<h3><b>￥</b>108</h3>
						<p>预定</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default({
		data(){
			return{
				Opacity:{
					opacity:0
				}
			}
		},
		methods:{
			gohome(){
				this.$router.push("/")
			},
			goimg(){
				this.$router.push("/img")
			}
		},
		mounted(){
			window.addEventListener('scroll',()=>{
				let topH = document.body.scrollTop || document.documentElement.scrollTop;
				let topOpacity = topH / 100; 
				if(topOpacity >6){
					topOpacity=1;
				}
				this.Opacity.opacity=topOpacity;
				// console.log(topOpacity)
			},true)
		}
	})
</script>
<style>
	.gowhere{
		border-top:0.2rem solid #ddd;
		border-bottom:0.2rem solid #ddd;
		padding:0 0.2rem;
		box-sizing: border-box;
	}
	.gowhere h2{
		font-size: 0.36rem;
		line-height: 0.88rem;
		border-bottom: 1px solid #ddd;
		font-weight: normal;
	}
	.gowhere h2 i{
		color:red;
		padding-right: 0.2rem;
	}
	.gowhere li{
		border-bottom:1px solid #ddd;
		overflow:hidden;
	}
	.gowhere .left{
		float: left;
		font-size: 0.3rem;
		line-height: 0.44rem;
		padding: 0.2rem 0;
	}
	.gowhere .left .img{
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
	}
	.gowhere .left i{
	    color: #00afc7;
	    font-size: .2rem;
    	line-height: .32rem;
	}
	.gowhere .right{
		float:right;
		font-size: 0.4rem;
	    color: #ff9800;
	    text-align: center;
		margin-top: 0.2rem;
	}
	.gowhere .right b{
		font-size: 0.28rem;
	}
	.gowhere .right p{
		padding:0.14rem 0.5rem;
		color: #fff;
		background: #ff9800;
		font-size: 0.28rem;
		border-radius: 0.1rem;
	}
	.topshow{
	    background: #00bcd4;
		color:#fff;
		position: fixed;
		top:0;
		left:0;
		right:0;
		line-height: 0.8rem;
		z-index: 50;
	}
	.topshow i{
		padding-left:0.3rem;
		float: left;
	}
	.topshow h1{
		text-align: center;
		font-size: 0.4rem;
	}
</style>
<style>
	.banner{
		overflow:hidden;
	}
	.banner .top{
		position: relative;
	}
	.banner .top .img{
		overflow: hidden;
	    height: 0;
	    width: 100%;
	    padding-bottom: 55%;
	}
	.banner .top .span{
		position: absolute;
	    left: .1rem;
	    top: .1rem;
	    width: .72rem;
	    height: .72rem;
	    line-height: .72rem;
    	background-color: #666;
    	border-radius: 50%;
	}
	.banner .top span{
	    position: absolute;
	    top:0;
	    left:0;
	    width: .72rem;
	    height: .72rem;
	    line-height: .72rem;
	    display: block;
	    text-align: left;
	    text-indent: .24rem;
	    font-size: .36rem;
		color:#fff;
	}
	.banner .top .imgnum{
		position: absolute;
		left:0.4rem;
		bottom:0.8rem;
		font-size: 0.24rem;
		color:#fff;
    	width: 1.2rem;
    	height: .4rem;
    	background: rgba(0,0,0,.5);
	}
	.banner .top .imgnum i{
		padding-right: 0.14rem;
	}
	.top_bottom{
		position: absolute;
		left:0.3rem;
		bottom:0.2rem;
		font-size: 0.36rem;
		color:#fff;
		width: 100%;
    	text-shadow: 0 1px 2px rgba(0,0,0,0.70);
	}
	.top_bottom h3{
		float: left;
	}
	.top_bottom .right{
		float: right;
		margin-right: 0.5rem;
	}
	.top_bottom .right h4{
		display: inline-block;
	}
	.top_bottom .right i{
		display: inline-block;
	}
	.content .info{
		width: 100%;
	    font-size: .24rem;
	    color: #9e9e9e;
	    line-height: .38rem;
	    overflow:hidden;
	}
	.content .info .left{
		width: 50%;
		border-right: 1px solid #ddd;
		box-sizing: border-box;
		float:left;
		position: relative;
		padding-left: 0.2rem;
		padding-top: 0.2rem;
	}
	.content .info .left .nice{
	    color: #ff8300;
	}
	.content .info .left .nice h2{
		font-size: .44rem;
	    line-height: .44rem;
	    display: inline-block;
	}
	.content .info .left .nice span{
		font-size: .28rem;
	}
	.content .info .right{
		width: 50%;
		float:left;
		position: relative;
		padding-left: 0.2rem;
		padding-top: 0.2rem;
		box-sizing: border-box;
	}
	.content .info .right h3{
	    color: #212121;
   		 font-size: .32rem;
	}
	.content .info i{
		position: absolute;
		right:0.2rem;
		top:30%;
	}
	.content .bottom {
		font-size: 0.32rem;
		line-height: 0.3rem;
		padding:0.2rem;
		display: flex;
    	color: #212121;
		box-sizing: border-box;
	}
	.content .bottom i{}
	.content .bottom p{
		display: inline-block;
		text-align: left;
		flex:1;
		margin-left: 0.4rem;
	}
</style>